<template>
  <div class="formatter-option">
    <el-form-item label="格式" style="width: 100%">
      <el-input v-model="data.formatter" :placeholder="placeholder" clearable/>
    </el-form-item>

    <el-form-item label="函数格式">
     <el-button type="info" @click="onScriptShow">设置函数</el-button>
    </el-form-item>

    <!-- 数据集选择 -->
    <simple-dialog2 v-bind.sync="dialog" theme="dark" @on-ok="onDialogOk"/>
  </div>
</template>

<script>
import dialogMixin from "@/components/common/dialog/dialog-mixin";
import optionScript from '@/package/components/option-script'

export default {
  name: 'formatter-option',
  cnName: 'formatter-option',
  mixins: [dialogMixin],
  components: {
  },
  props: {
    data: Object,
    placeholder: String
  },
  data() {
    return {}
  },
  methods: {
    onScriptShow(evt) {
      const origin = {
        x: evt.pageX,
        y: evt.pageY
      }
      this.setDialog({
        title: '数据处理',
        origin: origin,
        comp: optionScript,
        props: {
          value: this.data.formatterFn,
          type: 'formatter'
        }
      })
    },
    onDialogOk(res) {
      this.dialog.visible = false
      this.data.formatterFn = res
    }
  }
}
</script>

<style lang="less" scoped>
.formatter-option {
  width: 100% !important;
}
</style>
